<!-- 分页结果 -->
<!--分页-->
<template>
  <div class="margin-top-20 page-result">
    <el-card class="margin-top-20">
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >

        <table class="total-table">
          <tr>
            <td style="width:80px;">排行榜</td>
            
            <td style="width:500px;">视频信息</td>
            
            <td style="width:85px;">新增播放</td>
            
            <td style="width:85px;">新增点赞</td>
            
            <td style="width:85px;">新增收藏</td>
            
            <td style="width:85px;">新增评论</td>
            
            <td style="width:85px;">新增投币</td>
            
            <td>操作</td>

          </tr>
        </table>
        </div>     
      </div>            
    </el-card>

    <el-card class="margin-top-20">
        <ul>
          <li v-for="(item, index) in moviesLoist" :key="index">
            <div style="display: flex; justify-content: flex-start">
              <div class="up-info__avatar">
                <div>
                <table>
                  <tr>
              
                <td style="height:65px;">TOP1</td>
                <!--<a href="https://www.bilibili.com/video+'{{item.bvid}}'+?p=2&spm_id_from=pageDriver"></a>-->
                <img
                  :src=item.cover
                  width="150px"
                  height="130px"
                  style="margin-leif: 150px"
                />
                <div class="time">{{item.duration}}</div>
            
            
              </tr>
                </table>
            
            </div>
          </div>

              <div class="up-info__info">
                <div>
                  <span class="font-bolder">{{ item.name }}</span>
                </div>
                <div>
                  <span>U主</span><span>{{item.author_name }}</span>
                </div>
                <div class="info-list-name">
                  {{item.pubdate}}发布
                </div>
              </div>
            </div>
          </li>
        </ul>
    </el-card>

    <el-card class="margin-top-20">
      <!--一级分类-->

      <div
        style="display: flex; justify-content: flex-end width:60px;height:70px"
      >
        <!--留-->
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
          <!--留-->
          <table class="total-table">
            <tr>
              <td class="aa">
                <router-link to="/core">核心一览</router-link>
              </td>
              <td>
                <router-link to="/hot">爆款分析</router-link>
              </td>
              <td>
                <router-link to="/comment">评论分析</router-link>
              </td>
              <td>
                <router-link to="/danmu">弹幕分析</router-link>
              </td>
              <td>
                <router-link to="/audience">观众画像</router-link>
              </td>
            </tr>
          </table>
        </div>
      </div>
     
     

      
      <!--end-->

      <!--视频标签-->

      <!--end-->
    </el-card>

    <!--e分页5-->

    <el-card class="margin-top-20">
      <div style="display: flex; justify-content: flex-end">
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            cursor: pointer;
          "
        >
          <table class="total-table"></table>
        </div>
      </div>
    </el-card>

    <!---->
  </div>
</template>

<script>
import * as echarts from "echarts";
import service from "axios";
export default {
  name: "",
  data: function () {
    return {
      tests: [
        {
          cid: "",
          scid: "",
          id: "",
          name: "",
          cover: "",
          view_count: "",
          like_count: "",
          duration: "",
          author_name: "",
          author_id: "",
          bvid: "",
          card_type: "",
          sort1: "",
          filt: "",
          pubdate: "",
          danmu_count: "",
          coins_count: "",
          collect_count: "",
          share_count: "",
        },
      ],
      moviesLoist: [],
    };
  },

  components: {},

  computed: {},

  mounted: function () {
    this.line();
    this.fetch();
    this.getdata();
  },

  methods: {
    getdata() {
      service({
        url: "http://localhost:33333/api/v1/rank/hotVideo/",
      }).then((res) => {
        console.log(res);
        console.log(res.data.data.result);
        this.moviesLoist = res.data.data.result;
        //将数据按照点赞数进行降序操作
        this.moviesLoist.sort(function(a,b){
        return b.like_count-a.like_count
        });
        this.moviesLoist= this.moviesLoist.slice(0,4);
        console.log(this.moviesLoist);
      
    })
    
     
    },
    //第一个图
    async fetch() {
      const { data: resp } = await this.$http.get("/search/goods");
      this.tests = resp.data.result;
      console.log(this.tests);
    },
    line() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";
      var chartDom = document.getElementById("main");
      var myChart = echarts.init(chartDom);
      var option;

      var weatherIcons = {
        Sunny: ROOT_PATH + "/data/asset/img/weather/sunny_128.png",
        Cloudy: ROOT_PATH + "/data/asset/img/weather/cloudy_128.png",
        Showers: ROOT_PATH + "/data/asset/img/weather/showers_128.png",
      };

      option = {
        tooltip: {
          trigger: "item",
          //formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: 10,
          left: "center",
          data: ["男", "女"],
        },
        series: [
          {
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            selectedMode: "single",
            data: [
              {
                label: {
                  backgroundColor: "#eee",
                  borderColor: "#777",
                  borderWidth: 1,
                  borderRadius: 4,
                  rich: {
                    title: {
                      color: "#eee",
                      align: "center",
                    },
                    abg: {
                      backgroundColor: "#333",
                      width: "100%",
                      align: "right",
                      height: 25,
                      borderRadius: [4, 4, 0, 0],
                    },
                    Sunny: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        image: weatherIcons.Sunny,
                      },
                    },
                    Cloudy: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        image: weatherIcons.Cloudy,
                      },
                    },
                    Showers: {
                      height: 30,
                      align: "left",
                      backgroundColor: {
                        image: weatherIcons.Showers,
                      },
                    },
                    weatherHead: {
                      color: "#333",
                      height: 24,
                      align: "left",
                    },
                    hr: {
                      borderColor: "#777",
                      width: "100%",
                      borderWidth: 0.5,
                      height: 0,
                    },
                    value: {
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "left",
                    },
                    valueHead: {
                      color: "#333",
                      width: 20,
                      padding: [0, 20, 0, 30],
                      align: "center",
                    },
                    rate: {
                      width: 40,
                      align: "right",
                      padding: [0, 10, 0, 0],
                    },
                    rateHead: {
                      color: "#333",
                      width: 40,
                      align: "center",
                      padding: [0, 10, 0, 0],
                    },
                  },
                },
              },
              { value: 55, name: "男" },
              { value: 45, name: "女" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);

      //到此结束
    },
  },
};
</script>
<style lang="scss" scoped>


.page-result {
  height: 1000px;

  .column-1px {
    border-left: 1px solid #f6f7fb;
    margin: 0 20px;
    height: 120px;
  }
  .up-info__avatar {
    width: 184px;
    height: 115px;
    position: relative;

    margin-right: 16px;
    border-radius: 2px;
    text-align: center;

    .time {
      color: #999;
      margin-top: 10px;
      display: block;
      width: 39px;
      height: 17px;
      background: #000;
      background: rgba(0, 0, 0, 0.7);
      border-radius: 2px 0 2px 0;
      color: #fff;
      font-size: 12px;
      text-align: center;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  }
  .up-info__info {
    height: 120px;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-left: 10px;
    .info-list-name {
    }
    .tagList {
      text-align: left;
      display: flex;
      flex-wrap: wrap;
      margin-right: -4px;
      .tag {
        color: #909399;
        border: 1px solid #ebeef5;
        border-radius: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
        text-align: center;
        padding: 1px 3px;
      }
    }
  }

}
</style>

 